<template name="famousTeacher">
	<view class="tcBox" v-if="teacherList.length>0">
		<text class="title">优选名师</text>
		<scroll-view scroll-x="true" style="">
			<view class="tcList">
				<view class="item" v-for="(item,index) in teacherList" :key="index" @tap="toShopDetail" data-url="shopDetail" :data-id="item.storeId">
					<image :src="item.img"></image>
					<text class="name">{{item.name}}</text>
					<text class="tag" v-if="item.labels.length>0">{{item.labels[0]}}</text>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import Request from "@/sdk/pocky-request/index.js";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		name: 'famousTeacher', //组件名称
		computed: {
			...mapState({
				locationCity: state => state.map.locationCity,
				selectCity: state => state.map.selectCity
			})
		},
		// 传递参数
		props: {
			hasFresh: {
				type: Boolean,
				default: false
			},
		},

		// 组件参数
		data() {
			return {
				teacherList: [{
						id: 1,
						name: '李老师',
						img: '../../static/loding.png',
						labels: ['纯正口语'],

					},
					{
						id: 1,
						name: '王老师',
						img: '../../static/loding.png',
						labels: ['纯正口语'],

					}, {
						id: 1,
						name: '张老师',
						img: '../../static/loding.png',
						labels: ['纯正口语'],

					}
				],
			}
		},
		watch: {
			locationCity(newVal) {
				this.getData();
			},
			selectCity(newVal) {
				this.getData();
			},
			hasFresh(newVal) {
				if (!newVal) {
					this.getData()
				}
			}
		},
		// 组件方法
		methods: {
			getData() {
				let areaId = this.selectCity.cityCode;
				Request().request({
					url: '/mall/recom/teacher.do',
					method: 'post',
					data: {
						areaId: areaId,
					}
				}).then(res => {
					if (res.data.result == 1) {
						this.teacherList = res.data.data
					}
				})
			},
			toShopDetail(e){
				let _sid=e.currentTarget.dataset.id;
				this.$store.dispatch("apiGetShopDetail",{
					id:_sid,
					userId:0
				}).then(res=>{
					res.data.data.score=res.data.data.score==0?5.0:res.data.data.score
					uni.setStorageSync("toShop",res.data.data)
					this.toPage(e)
				})
			}
		},
		created() {

			setTimeout(() => {
				this.getData()
			}, 300)
		}
	}
</script>

<style lang="less" scoped>
	.tcBox {
		display: flex;
		flex-direction: column;
		margin-bottom: 40upx;

		.title {
			font-size: 32upx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 20upx;
			padding-left: 10upx;
		}
	}

	.tcList {
		display: flex;

		.item {
			width: 25%;
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			align-items: center;

			image {
				width: 124upx;
				height: 124upx;
				border-radius: 50%;
			}

			.name {
				font-size: 30upx;
				line-height: 60upx;
			}

			.tag {
				font-size: 24upx;
				height: 36upx;
				line-height: 36upx;
				background-color: #eacc92;
				border-radius: 18rpx;
				padding: 0 10upx;
				color: #FFFFFF;
			}
		}
	}
</style>
